<template>
  <div>
    <input v-model="inputValue" @input="onChange" />
  </div>
</template>

<script>
export default {
  // 子组件接收v-model的值，可使用model自定义参数命和事件
  model: {
    prop: "modelValue", //指向props的参数名
    event: "input" //事件名称
  },
  props: {
    modelValue: {
      // 父组件传递过来的modelValue
      type: String,
      default: ""
    }
  },
  watch: {
    modelValue: {
      handler(newValue, oldValue){
        console.log('newValue=', newValue);
      }
    }
  },
  data() {
    // 如果不设置会报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-render
    // 避免子组件修改父组件传过来的props
    return { inputValue : this.modelValue}
  },
  methods: {
    onChange($event) {
      // v-model绑定自定义组件，子组件内部必须暴漏出对应的事件
      this.$emit("input", $event.target.value);
    }
  }
};
</script>

<style scoped></style>
